import React, {useEffect, useState} from "react";
import {FbInfo} from "@/api/web/FileBucketApi.ts";
import {Skeleton} from "antd";
import FileApi from "@/api/web/FileApi.ts";
import MyArtPlayer from "@/components/MyArtPlayer";
import Artplayer from "artplayer";
import {createStyles} from "antd-style"
import PathList from "@/components/PathList.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: grid;
            grid-template-rows: auto 1fr;

            .list {
                overflow: auto;
            }
        `,
    }
})

interface Props {
    fbInfo: FbInfo
    pathList: string[]
}

const VideoBucket: React.FC<Props> = ({fbInfo, pathList}) => {
    const [activePath, setActivePath] = useState('')
    const [activeIndex, setActiveIndex] = useState(0)
    const [art, setArt] = useState<Artplayer | null>(null)
    const styles = useStyles().styles

    if (pathList.length == 0) {
        return (
            <Skeleton/>
        )
    }

    useEffect(() => {
        if (pathList && pathList[0] && pathList[0] != '' && activePath == '') {
            setActivePath(pathList[0])
        }
    }, []);

    useEffect(() => {
        if (art == null) return
        art.url = FileApi.getFileLink(activePath)
    }, [activePath]);

    return (
        <div className={styles.container}>
            <div>
                <MyArtPlayer
                    getInstance={(art) => {
                        setArt(art)
                        const pre = document.createElement('button')
                        const next = document.createElement('button')
                        pre.style.objectFit = 'contain'
                        pre.innerHTML = "◁"
                        next.innerText = "▷"

                        art.controls.add({
                            index: 40,
                            name: "pre",
                            html: pre,
                            position: 'left',
                            click: () => {
                                setActiveIndex(i => {
                                    if (i == 0) {
                                        new Promise<void>((resolve) => {
                                            resolve()
                                        }).then(() => {
                                            window.messageApi.info("已经是第一个了").then()
                                        })
                                        return i
                                    }
                                    setActivePath(pathList[i - 1])
                                    return i - 1
                                })
                            },
                        })

                        art.controls.add({
                            index: 50,
                            name: "next",
                            html: next,
                            position: 'left',
                            click: () => {
                                setActiveIndex(i => {
                                    if (i == pathList.length - 1) {
                                        new Promise<void>((resolve) => {
                                            resolve()
                                        }).then(() => {
                                            window.messageApi.info("已经是最后一个了").then()
                                        })
                                        return i
                                    }
                                    setActivePath(pathList[i + 1])
                                    return i + 1
                                })
                            },
                        })
                    }}
                />
            </div>
            <div className="list">
                <PathList
                    pathList={pathList}
                    onClick={(path, index) => {
                        setActivePath(path)
                        setActiveIndex(index)
                    }}
                    preProcess={(path) => {
                        return path.substring(fbInfo.rootPath.length)
                    }}
                    bottomDivider
                />
            </div>
        </div>
    )
}

export default VideoBucket
